<template>
<div class="blacklist-container">
  <header class="header">
    <div class="header-content">
      <div class="header-left">
        <svg class="back-btn" @click="goBack" viewBox="0 0 24 24" width="24" height="24">
          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="#333"/>
        </svg>
        <div class="header-title">黑名单管理</div>
      </div>
    </div>
  </header>

  <main class="main-content">
    <div v-if="blacklist.length != 0" class="blacklist-info">
      <div class="info-text">被加入黑名单的用户将无法与你互动</div>
    </div>

    <div class="blacklist-list">
      <div v-if="blacklist.length === 0" class="empty-state">
        <el-empty description="你还没有拉黑任何人" :image-size="150"/>
      </div>
      
      <div v-for="user in blacklist" :key="user.id" class="blacklist-item">
        <div @click="goUserProfile(user.id)" class="user-avatar" :style="{ backgroundImage: `url(${user.avatarUrl})` }">
          {{ user.avatarUrl ? '' : user.username?.charAt(0) }}
        </div>
        <div class="user-info">
          <div class="username">{{ user.username }}</div>
          <div class="user-id">ID: {{ user.id }}</div>
        </div>
        <div class="action-btn remove-btn" @click="removeFromBlacklist(user.id)">
          移除
        </div>
      </div>
    </div>
  </main>
</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '@/api/index.js'
import { TipStore } from '@/stores/tipStore'

const router = useRouter()
const tip_Store = TipStore()

// 黑名单列表
const blacklist = ref([])

// 返回上一页
const goBack = () => {
  router.back()
}

// 跳转用户个人页
function goUserProfile(uid){
    router.push({
        name: 'UserProfile',
        query: { uid: uid }
    });
}

// 从黑名单移除用户
const removeFromBlacklist = async (userId) => {
  try {
    const res = await api.Blacklist_remove(userId)
    if(res.data.code !== 1){
      tip_Store.errorTip(res.data.message)
      return
    }
    blacklist.value = blacklist.value.filter(user => user.id !== userId)
    tip_Store.successTip('移除成功')
  } catch (error) {
    console.error('移除黑名单失败:', error)
  }
}

// 获取黑名单列表
const fetchBlacklist = async () => {
  try {
    const res = await api.Blacklist_getMyBlockList()
    blacklist.value = res.data.data
  } catch (error) {
    console.error('获取黑名单失败:', error)
  }
}

onMounted(() => {
  fetchBlacklist()
})
</script>

<style lang="scss" scoped>
.blacklist-container {
  min-height: 100vh;
  background-color: #ffffff;
}

.header {
  background: white;
  padding: 10px 15px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.08);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.back-btn {
  cursor: pointer;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
}

.main-content {
  padding-top: 46px;
  padding-bottom: 20px;
}

.blacklist-info {
  background: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.info-text {
  font-size: 14px;
  color: #666;
  text-align: center;
}

.blacklist-list {
  background: white;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.blacklist-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.blacklist-item:last-child {
  border-bottom: none;
}

.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff6b6b, #ffa500);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  margin-right: 15px;
  background-size: cover;
  background-position: center;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.user-id {
  font-size: 12px;
  color: #999;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.remove-btn {
  background-color: #ff6b6b;
  color: white;
  border: none;
}

.remove-btn:hover {
  background-color: #ff5252;
}
</style>